<template>
  <div>
      <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="username"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="mobile"
      label="电话"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="identity"
      label="用户身份"
      width="120">

    </el-table-column>
        <el-table-column
      prop="registe_time"
      label="注册时间"
      width="150">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看订单</el-button>
        <!-- <el-button type="text" size="small">编辑</el-button> -->
      </template>
    </el-table-column>
  </el-table>
  <el-drawer
  size="50%"
  :with-header="false"
  :visible.sync="drawer">
      <div class="item-header">
      <div class="top-block">详情</div>
      <div class="top-btn">


      </div>
    </div>
        <div class="item-content">
   <el-table
    :data="orderData"
    border
    style="width: 100%">
    <el-table-column
      prop="restaurant_name"
      label="店铺名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="total_amount"
      label="订单价格"
      width="120">
    </el-table-column>
    <el-table-column
      prop="formatted_created_at"
      label="下单时间"
      width="300">
    </el-table-column>
    <el-table-column
      prop="status_bar.title"
      label="订单状态"
      width="120">

    </el-table-column>
        <el-table-column
      prop="basket.deliver_fee"
      label="配送费"
      width="150">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="商品详情"
      width="100">
     <template slot-scope="scope"> 
       <span @click="showDetail">商品详情</span>
     </template>
    </el-table-column>
  </el-table>
        </div>
</el-drawer>
<el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="30%"
  center>
  <el-card v-for="(item,index) in foodDeatil" :key="index" class="box-card">
  <div slot="header" class="clearfix">
    <span>{{item.foodname}}</span>
  </div>
  <div class="text item">
    <el-tag>规格：</el-tag><span v-for="item,index in item.foodSpec" :key="index">{{item}}</span>
  </div>
    <div class="text item">
    <el-tag>价格：</el-tag><span>{{item.price}}</span>
  </div>  <div class="text item">
<el-tag>数量：</el-tag><span>{{item.count}}</span>  </div>
</el-card>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
data(){
  return{
    tableData:[],
    drawer:false,
    orderData:'',
    centerDialogVisible:false,
    foodDeatil:[{foodname:'汉堡',foodSpec:['变态辣'],price:25,count:1},{foodname:'炸鸡',foodSpec:['变态辣'],price:35,count:1},{foodname:'炸鸡腿2只',foodSpec:['变态辣'],price:25,count:2},]
  }
},
created(){
  this.getTableData()
},
methods:{
  async getTableData(){
    let data= function getData(){
      return axios.get('../../user.json').then(res=>res.data)
    }
    this.tableData=await data()
    console.log(123321,this.tableData)
  },
  handleClick(){
    this.drawer=true
    axios.get('../../order.json').then(res=>{
      this.orderData=res.data
      console.log(45665434,this.orderData)
    })
    
  },
  showDetail(){
    this.centerDialogVisible=true
  }
}
}
</script>

<style lang="scss">
  .item-header {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 72px;
    padding: 0 48px;
    margin-bottom: 28px;
    background-color: #f7f7f7;
    .top-block {
      width: 94%;
      font-size: 18px;
      color: #333333;
    }
    .top-btn {
      display: flex;
    }
  }
    .item-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 0 34px;
    .info-block {
      border-bottom: 1px solid #e5e5e5;
      position: relative;
      padding-bottom: 33px;
      margin-bottom: 33px;
      .info-block-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        padding-left: 15px;
        padding-bottom: 17px;
        font-size: 14px;
        color: #333333;
        .detail-label {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          width: 150px;
          margin-right: 20px;
        }
        .detail-value {
          width: 700px;
        }
      }
    }
  }
</style>